<template>
  <div class="cell_box">
    <ul>
      <li v-for="item in data" :key="item.id">
        <div class="cell_box-name" :class="nameClass">{{ item.name }}</div>
        <div class="cell_box-value" :class="valueClass">{{ item.value }}</div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    data: Array,
    nameClass: String,
    valueClass: String
  }
};
</script>

<style lang="less" scoped>
.cell_box{
  ul li{
    display: flex;
    line-height: 20px;
    margin: 8px 0;
    .cell_box-name{
      width: 7em;
      font-size: 14px;
      color: #999;
      &.w8{
        width: 8em;
      }
    }
    .cell_box-value{
      flex: 1;
      font-size: 14px;
      color: #333;
      &.tr{
        text-align: right
      }
    }
  }
}
</style>